<template>
    <div class="main real-box">
        <div class="top-panel">
            <div class="search-pane">
                <div class="search-item-box">
                    <a-select size="small" style="width: 200px"></a-select>
                </div>
                <div class="search-item-box">
                    <a-select size="small" style="width: 200px"></a-select>
                </div>
                <div class="search-item-box">
                    <a-select size="small" style="width: 200px"></a-select>
                </div>
                <div class="search-item-box">
                    <a-button type="primary" ghost size="small">查询</a-button>
                </div>
                <div class="search-item-box">
                    <a-button type="default" class="reset-btn" size="small">重置</a-button>
                </div>
            </div>
            <div class="btn">
                <a-button type="primary" @click="addStation">添加</a-button>
            </div>
        </div>
        <div class="table-box">
            <PileTable :pileEntities="data" :total="page.total" @changePage="changePage" @edit="editPile" @status="setStatus"></PileTable>
        </div>
        <AddPile ref="pile" :title="title" :id="id" @reloadList="queryList"></AddPile>
	    <!--修改充电桩状态-->
	    <a-modal v-model:visible="statusVisible" title="设置电站" @ok="saveStatus">
		    <a-radio-group v-model:value="status">
			    <a-radio :style="{height: '30px', lineHeight: '30px'}" :value="1">正常使用</a-radio>
			    <a-radio :style="{height: '30px', lineHeight: '30px'}" :value="2">暂停服务</a-radio>
		    </a-radio-group>
		    <div class="radio-box">
			    <div class="radio-box-item">电站在运营过程中会根据实际情况适时调整：</div>
			    <div class="radio-box-item">1、暂停服务则是表示该桩体未开启或者需要维护保养状态，无法提供充电服务</div>
			    <div class="radio-box-item">2、正常使用则是表示该桩体良好，可以正常运营和提供充电服务</div>
		    </div>
	    </a-modal>
    </div>
</template>

<script>
    import AddPile from "@/view/pile/components/AddPile";
    import {api, post} from "@/api/api";
    import moment from "moment";
    import PileTable from "@/components/PileTable";

    export default {
        name: "PileList",
        components: {PileTable, AddPile},
        data() {
            return {
                topDrawer: false,
                page: {
                    current: 1,
                    pageSize: 20,
                    total: 0,
                },
                id: '', // 编辑时的电站Id
                loading: true,
                data: [],
                title: '',
                moment,
	            statusVisible: false,
	            status: 1,
            }
        },
        created() {
            this.queryList()
        },
        methods: {
            queryList() {
                post(api.PileEntities, {page: this.page.current, limit: this.page.pageSize}).then(res => {
                    this.data = res.data.data
                    this.page.total = res.data.count
                })
            },
            editPile(id) {
                this.title = '编辑充电桩'
	            console.log(id)
                this.$refs.pile.show(id)
            },
            deleteStation(id) {
                console.log(id)
            },
	        // 修改状态
	        setStatus(spear){
		        this.statusVisible = true
		        this.status = spear.status
		        this.id = spear.id
	        },
	        saveStatus(){
		        let that = this
		        that.$confirm({
			        title: '提示',
			        content: '确定此操作吗？',
			        okText: '确认',
			        cancelText: '取消',
			        type: 'warning',
			        showCancel: false,
			        onOk() {
				        post ( api.UpdatePile, {id: that.id, status: that.status} ).then ( res => {
					        that.statusVisible = false
					        that.queryList()
				        } )
			        },
			        onCancel() {
			        }
		        })
	        },
            addStation() {
                this.title = '添加充电桩'
                this.$refs.pile.show()
            },
            //由子组件通过$emit调用触发
            changePage(pageInfo) {
                this.page.current = pageInfo.page
                this.page.pageSize = pageInfo.pageSize
                this.queryList()
            },
        }
    }
</script>

<style scoped>
    .real-box .table-box {
        height: calc(100vh - 140px);
    }

    .real-box .table-contain {
        height: calc(100% - 50px);
        overflow-y: auto;
    }
</style>
